<template>
  <div class="settle-account">
    <div class="settle-account-child">
      <table>
        <tr>
          <td colspan="4">项目结算表</td>
        </tr>
        <tr>
          <td colspan="4">
            <div class="head-content">
              <div class="deptname">
                部门：<span>{{ getTreeName(tabledata.deptId, deptOptions) }}</span>
              </div>
              <div class="project-no">
                项目编号：<span>{{ tabledata.projectOn }}</span>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>项目名称</td>
          <td>{{ tabledata.projectName }}</td>
          <td>项目回款情况说明</td>
          <td>{{ tabledata.payment }}</td>
        </tr>
        <tr>
          <td>客户名称</td>
          <td>
            {{
              filterData(
                customerList,
                "customerId",
                tabledata.customerId,
                "customerName"
              )
            }}
          </td>
          <td>项目质保金情况说明</td>
          <td></td>
        </tr>
        <tr>
          <td>项目申请人</td>
          <td>
            {{
              filterData(ownerList, "userId", tabledata.applyUser, "userName")
            }}
          </td>
          <td>项目负责人</td>
          <td>
            {{
              filterData(ownerList, "userId", tabledata.principalId, "userName")
            }}
          </td>
        </tr>
        <tr>
          <td>项目金额</td>
          <td>{{ tabledata.projectSum }}</td>
          <td>最终利润</td>
          <td>{{ tabledata.profit }}</td>
        </tr>
        <tr>
          <td>利润率</td>
          <td colspan="3">{{ tabledata.profitMargin }}</td>
        </tr>
        <tr>
          <td colspan="4">项目成本费用支出及税金</td>
        </tr>
        <tr class="moneytitle">
          <td>项目核算清单</td>
          <td>项目核算明细</td>
          <td>小计</td>
          <td>备注</td>
        </tr>
        <tr v-for="item in tabledata.detailsList" :key="item.id" class="list">
          <td>{{ item.detailsName }}</td>
          <td>{{ item.detailsDesc }}</td>
          <td>{{ item.detailsAmount }}</td>
          <td>{{ item.remark }}</td>
        </tr>
        <tr>
          <td colspan="1">费用总计</td>
          <td colspan="3">{{ tabledata.aggregationCharge }}</td>
        </tr>
        <tr class="glyj">
          <td>管理层意见</td>
          <td colspan="3" style="text-align: left; position: relative">
            {{ tabledata.opinion }}
            <!-- <el-image :src="qm" v-show="process != null && process != 0" style="position: absolute;top:0;left:50px;"></el-image> -->
          </td>
        </tr>
        <tr v-for="(task, index) in tabledata.hisTaskList" :key="index">
          <td style="padding: 0; margin: 0">审核人签名</td>
          <td colspan="3" style="text-align: left; padding: 0; margin: 0">
            <el-image :src="task.signature" style="height: 80px">
              <div slot="error" class="image-slot"></div>
            </el-image>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
// import qmImg from '@/assets/images/qm.png'
export default {
  props: {
    tabledata: {
      type: Object,
      default: {},
    },
    ownerList: {
      type: Array,
      default: [],
    },
    customerList: {
      type: Array,
      default: [],
    },
    deptOptions: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      // qm: qmImg
    };
  },
  methods: {
    getTreeName(deptId, deptList) {
      if (!deptId) return;
      if (!deptList || !Array.isArray(deptList)) return;

      for (let item of deptList) {
        if (item.id === deptId) {
          return item.label;
        }
        if (item.children) {
          const result = this.getTreeName(deptId, item.children);
          if (result) {
            return result;
          }
        }
      }
    },
    filterData(arr, arrfiled, filed, returnfiled) {
      if (filed) {
        let res = arr.filter((item) => {
          return item[arrfiled] == filed;
        });
        if (res.length > 0) {
          return res[0][returnfiled];
        } else {
          return "";
        }
      }
    },
  },
  created() {},
};
</script>
<style scoped>
/* .settle-account{
    position: relative;
    
  }
  .settle-account-child{
    position: absolute;
    top: -100px;
    left: 0;
  } */
.head-content {
  display: flex;
}
.deptname,
.project-no {
  width: 50%;
  text-align: left;
  font-weight: bold;
  padding-left: 10px;
}
/* .project-no{
      width: 50%;
  } */
h2 {
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
}
table {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  border-spacing: 0;
}
td {
  border: 1px solid #000;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
td:nth-child(odd) {
  width: 24%;
  font-weight: bold;
}
td:nth-child(even) {
  width: 26%;
}
.qddw {
  display: inline-block;
  margin-left: 5%;
}
.moneytitle td,
.glyj td {
  line-height: 3;
}
.moneytitle td:nth-child(even) {
  font-weight: bold;
}
.list td:nth-child(odd) {
  font-weight: normal;
}
</style>